<template>
<!--  计数器: {{count}}  {{$store.state.count}}

  <hr>

  double: {{double}} {{$store.getters.double}}

  <hr>-->

  <!-- case1: 严格模式下会报错 -->
  <button @click="$store.state.count++">错误修改</button>


<!--  <button @click="add">同步修改</button>
  <button @click="asyncAdd">异步修改</button>-->


  <!-- phase: 1 -->
  <!-- {{$store.a}} -->


  <!-- phase: 2 -->
  计数器: {{count}}  {{$store.state.count}}
  <button @click="$store.state.count++">+</button>

  <!-- phase: 3 -->
  <hr/>
  double: {{double}} {{$store.getters.double}}

  <!-- phase: 4 -->
  <hr/>
  <button @click="add">同步修改</button>
  <button @click="asyncAdd">异步修改</button>

  <hr/>
  a模块: {{aCount}}
  b模块: {{bCount}}
  c模块: {{cCount}}
  d模块: {{dCount}}

  <hr>
  <button @click="$store.commit('aCount/add',1)">改a</button>
  <button @click="$store.commit('bCount/add',1)">改b</button>
  <button @click="$store.commit('aCount/cCount/add',1)">改c</button>
  <button @click="$store.commit('aCount/dCount/add',1)">改d</button>
</template>

<script>
// import {useStore} from "vuex";
//↑ 官方的
//↓ 我们的
import {useStore} from "@/vuex";
import {computed,toRefs} from "vue";

export default {
  name: 'App',
  setup() {
    console.log('---------setup---------');
    const store = useStore();
    console.log('store:',store)

    function add(){
      store.commit('add',1)
    }

    function asyncAdd(){
      store.dispatch('asyncAdd', 1).then(() => {
        alert('ok');
      });
    }

    return {
      // ...toRefs(store.state)
      count: computed(() => store.state.count),
      double: computed(() => store.getters.double),
      aCount: computed(()=>store.state.aCount.count),
      bCount: computed(()=>store.state.bCount.count),
      cCount: computed(()=>store.state.aCount.cCount.count),
      dCount: computed(()=>store.state.aCount.dCount.count),
      add,
      asyncAdd
    };
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
